{{extend './common/layout.html'}}

{{ block 'main' }}
<!-- 头部 -->
{{ include './common/header.html' }}
<!-- /头部 -->
<!-- 主体内容 -->
<div class="content">
    <!-- 侧边栏 -->
    {{ include './common/aside.html' }}
    <!-- 侧边栏 -->
    <div class="main">
        <!-- 分类标题 -->
        <div class="title">
            <h4>新增文章</h4>
        </div>
        <!-- /分类标题 -->
        <!-- enctype="multipart/form-data"  转换编码格式为二进制 不然无法上传图片 -->
        <form class="form-container" action="/admin/article/add" method="POST" enctype="multipart/form-data">
            <div class="form-group">
                <label>标题</label>
                <input type="text" class="form-control" placeholder="请输入文章标题" name="title">
            </div>
            <div class="form-group">
                <label>作者: {{ user.uname }} ({{ user.email }})</label>
                <input type="text" class="form-control" readonly name="author" value="{{ user._id + '' }}">
            </div>
            <div class="form-group">
                <label>发布时间</label>
                <input type="date" class="form-control" name="publishDate">
            </div>

            <div class="form-group">
                <label for="exampleInputFile">文章封面</label>
                <input type="file" name="cover" id="cover" multiple>
                <div class="thumbnail-waper"></div>
            </div>
            <div class="form-group">
                <label>内容</label>
                <textarea class="form-control" id="editor" name="content"></textarea>
            </div>
            <div class="buttons">
                <input type="submit" class="btn btn-primary">
            </div>
        </form>

    </div>
</div>
<!-- /主体内容 -->
{{ /block }}

{{ block 'js' }}
<script src="/static/admin/lib/ckeditor5/ckeditor.js"></script>
<script type="text/javascript">

    let editor;

    ClassicEditor
        .create(document.querySelector('#editor'))
        .then(newEditor => {
            editor = newEditor;
        })
        .catch(error => {
            console.error(error);
        });

        // 获取数据
        // const editorData = editor.getData();
</script>

<script src="/static/admin/js/previewImg.js"></script>
<script>
    ;(() => {
        previewImg(document.querySelector('#cover'),document.querySelector('.thumbnail-waper'));
    })()
</script>
{{ /block }}